//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin range-slider() {
    /* ==========================================================================
       Range slider

       Default Mendix range slider widget.
    ========================================================================== */

    .widget-range-slider {
        margin-bottom: 16px;
        padding: 4px 12px;

        .rc-slider-handle,
        .rc-slider-dot-active {
            border-color: #dddddd;
        }

        .rc-slider.rc-slider-disabled {
            background-color: transparent;
        }

        .rc-slider.rc-slider-with-marks {
            padding-bottom: 25px;
        }

        &.has-error {
            .rc-slider-track,
            .rc-slider-rail {
                background-color: $brand-danger;
            }
        }
    }

    .rc-slider {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 14px;
        padding: 4px 0;
        border-radius: 6px;
        touch-action: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .rc-slider-rail {
        position: absolute;
        width: 100%;
        height: 4px;
        border-radius: 6px;
        background-color: #e9e9e9;
    }

    .rc-slider-track {
        position: absolute;
        left: 0;
        height: 4px;
        border-radius: 6px;
    }

    .rc-slider-step {
        position: absolute;
        width: 100%;
        height: 4px;
        background: transparent;
    }

    .rc-slider-handle,
    .rc-slider-dot-active {
        position: absolute;
        width: 14px;
        height: 14px;
        margin-top: -5px;
        margin-left: -7px;
        cursor: grab;
        border: 2px solid $brand-default;
        border-radius: 50%;
        background-color: #ffffff;
        touch-action: pan-x;

        &:focus {
            border-color: #57c5f7;
            outline: none;
            box-shadow: 0 0 0 5px #96dbfa;
        }

        &:active {
            border-color: $brand-default;
            box-shadow: none;
        }

        &:hover {
            border-color: $brand-default;
        }
    }

    .rc-slider-mark {
        position: absolute;
        top: 18px;
        left: 0;
        width: 100%;
        font-size: 12px;
    }

    .rc-slider-disabled .rc-slider-handle,
    .rc-slider-disabled .rc-slider-dot {
        cursor: not-allowed;
        border-color: #cccccc;
        background-color: #ffffff;
        box-shadow: none;
    }

    .rc-slider-tooltip {
        z-index: 999;
    }
}
